<template>
	<view>
		<view class="cantainer">
			<view class="date">
				<uni-datetime-picker type="date" v-model="single" @change="change($event)"></uni-datetime-picker>
				<view class="title"><span>设备号：</span><span style="color: green; font-weight: bold;">{{ list.length &&
					list[0].deviceNo || '请选择有设备的日期' }}</span></view>
			</view>
			<view v-for="(i, idx) in list" :key="i.id" @click="detail(i)">
				<view class="whiteBox flexR mtb20" @click="warnPage">
					<uni-icons type="videocam-filled" color="#000" size="20"></uni-icons>
					<span>{{ i.flvTimestamp }}</span>
					<span class="flow"></span>
					<span>{{ getTime(i.flvTimestamp * 1000) }}</span>
					<uni-icons type="right" color="#999" size="20"></uni-icons>
				</view>
			</view>
			<view v-if="!list.length" class="kong">暂无数据</view>
			<view v-if="last && list.length" class="last">已经到底了</view>
		</view>
		<view></view>
	</view>
</template>

<script>
import listWarn from '@/components/listWarn.vue';
import { parseTime } from '@/utils/index'

export default {
	components: { listWarn },
	data() {
		return {
			single: '',
			list: [],
			last: false,
			page: 1,
			obj: {},
		};
	},
	onLoad(p) {
		let { info } = p;
		this.obj = JSON.parse(info)
		this.getList()
	},
	onReachBottom() {
		setTimeout(() => this.loadmore(), 1000)
	},
	methods: {
		getTime(v) {
			if (!v) return '--'
			return parseTime(v)
		},
		change(v) {
			console.log(v);
			this.single = v
			this.list = [];
			this.last = false;
			this.page = 1;

			this.getList();
		},

		detail(i) {
			uni.navigateTo({
				url: `/pages/preview?type=2&info=${JSON.stringify(i)}`
			});
		},
		clear() {
			this.list = [];
			this.page = 1;
			this.deviceName = '';
			this.getList();
		},
		search() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		loadmore() {
			if (this.last) return;
			this.page += 1;
			this.getList();
		},
		getList(i) {
			this.$axios({
				method: 'get',
				url: `/senor/flv/applistByDeviceNo?pageNum=${this.page}&pageSize=10&deviceNo=${this.obj.no}&flvTimestampStr=${this.single}`,
			}).then(res => {
				this.list = this.list.concat(res.rows);
				if (this.list.length >= res.total) {
					this.last = true;
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.date {
	margin-bottom: 10px;
}

.title {
	margin: 10px 0 0;
	font-size: 30rpx;
}
</style>